<template>
<div>
  <!-- 中间导航 breadcrumb-->
  <el-breadcrumb class="breadcrumb-container" separator="/">
    <el-breadcrumb-item :to="{ path: '/admin/restaurant' }">admin</el-breadcrumb-item>
    <el-breadcrumb-item>restaurant</el-breadcrumb-item>
  </el-breadcrumb>

  <el-main>
    <el-table :data="dataList"  height="630" v-loading="isLoading"
    style="width : 100%">
        <el-table-column label="姓名" prop="name.zh-CN"
        width="225" height="25"></el-table-column>
        <el-table-column label="地址" prop="address.formatted" width="350"></el-table-column>

        <el-table-column label="标签" width="300">
          <template slot-scope="scope">
            <el-tag v-for="(item,index) in scope.row.tags" :key="index">
              {{ $t("tags."+item.toLowerCase()) }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="225">
          <template slot-scope="scope">
            <el-button type="button"
            @click="changeVisible(scope.row)" :disabled='!operateShowing' >操作</el-button>
          </template>
        </el-table-column>

        <el-table-column label="关闭状态" prop="closed" width="225">
          <!-- {{scope.row}} 打印出所有的数据，是每一个对象=== item -->
          <template slot-scope="scope">
          <!-- {{scope.row.closed}} -->
            <el-switch v-model="scope.row.isClosed"  @change='changeStatus(scope.row._id, $event)'
            active-color="#008080" inactive-color="#dcdfe6"></el-switch>
          </template>
        </el-table-column>
    </el-table>

        <!-- 页码部分 -->
        <div class="restaurant-pagination">
          <div class="foot-page">
            <el-pagination :page-size="pageSize" layout="prev, pager, next"
            :total="totals" :current-page="currentPage" @current-change="handleCurrentChange"
              ></el-pagination>
          </div>
        </div>
  </el-main>

  <!-- 操作的 dialog -->
      <OperateDialog />

</div>
</template>

<script>
// import _ from 'lodash';
import { get } from '@/common/utils';
import { mapState, mapActions } from 'vuex';
import OperateDialog from '@/views/admin/components/restaurant/components/OperateDialog.vue';

export default {
  components: { OperateDialog },
  data() {
    return {
      operateDialog: false,
      pageNum: 1, // 共几页
      pageSize: 10, // 每页显示数量
      currentPage: 1, // 当前显示页码
      total: 10, // 总共多少条数据
      restaurantData: {},
    };
  },

  computed: {
    ...mapState({
      shopList: (state) => state.restaurant.list,
      isLoading: (state) => state.loading.isShow,
      // operateShowing: (state) => state.login.operateShow,

    }),

    totals() {
      return this.shopList.length;
    },
    dataList() {
      // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
      return this.shopList.slice(this.pageSize * (this.pageNum - 1),
        this.pageSize * this.pageNum);
    },
    operateShowing() {
      return get('operateShowStore');
    },

  },

  created() {
    this.getRestaurant();
  },

  methods: {
    ...mapActions([
      'getRestaurant',
      'getClosed',
      'dialogVisible',
      'saveEveryRow',
      'saveChooseTags',
    ]),

    // 当前页码发生变化
    handleCurrentChange(newPageNum) {
      // console.log('当前页码:', newPageNum);
      this.pageNum = newPageNum;
    },

    // 改变开关的 ture &false,如果Boolean发生改变就改变 isClosed的值，从新发送请求渲染页面
    changeStatus(id, $event) { //* ID值是可以从上面传下来
      // console.log('id', id);// 拿到id
      // console.log($event);// true & false
      this.getClosed({ id, closed: $event });
      // }
    },

    changeVisible(row) {
      this.dialogVisible(true);
      this.saveEveryRow(row);//* 存住表格里面每一行的信息
      // console.log('row.tags', row);
      this.saveChooseTags(row.tags);
    },

  },
};
</script>

<style lang="scss" scoped>
.el-main{
  line-height : 0px;
}

.el-table{
  position : relative;
}
</style>
